<template>

  <div class="search">

    <div class="search-content">
      <div class="startpage-search-frame">
        <input type="search" placeholder="搜索..." v-model="searchText">
        <button @click="search">
          <i class=" fa fa-search"></i>
        </button>
        <el-select v-model="searchParams" placeholder="请选择搜索模式">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="filter">
        <div class="filter1">
          <span>日期筛选:</span>
          <el-date-picker
              v-model="datePicker"
              type="daterange"
              value-format="yyyy-MM-dd"
              :disabled="PickerStatus"
              @blur="filterDate('Picker')"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="filter1">
          <span>下次产检时间筛选:</span>
          <el-date-picker
              v-model="datePicker1"
              :disabled="Picker1Status"
              @blur="filterDate('Picker1')"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>

        </div>
        <router-link class="create ex"
                     style="margin-left: 30px;margin-top: 5px;"
                     to="/edit"
        >
          新建孕妇信息
        </router-link>
      </div>
      <div class="search-table">
        <el-table
            v-if="tableData.length"
            :data="tableData"
            ref="multipleTable"
            border
            height="491"
            @selection-change="handleSelectionChange">
            style="width: 100%">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="date"
              label="日期"
              width="95">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="75">
          </el-table-column>
          <el-table-column
              prop="age"
              width="50"
              label="年龄">
          </el-table-column>
          <el-table-column
              prop="identity"
              width="165"
              label="身份证">
          </el-table-column>
          <el-table-column
              prop="phone"
              width="110"
              label="手机号码">
          </el-table-column>
          <el-table-column
              prop="huji"
              width="80"
              label="户籍地">
          </el-table-column>
          <el-table-column
              prop="address"
              width="120"
              label="地址">
          </el-table-column>

          <el-table-column
              prop="ycc"
              width="70"
              label="孕产次">
          </el-table-column>
          <el-table-column
              width="95"
              prop="mcyj"
              label="末次月经">
          </el-table-column>
          <el-table-column
              prop="ycq"
              width="95"
              label="预产期">
          </el-table-column>
          <el-table-column
              prop="yz"
              width="55"
              label="孕周">
          </el-table-column>
          <el-table-column
              prop="gwys"
              label="高危因素">
          </el-table-column>
          <el-table-column
              prop="xccj"
              width="95"
              label="下次产检时间">
          </el-table-column>
          <el-table-column
              prop="rate"
              width="50"
              label="评分">
          </el-table-column>
          <el-table-column
              prop="rateColor"
              label="评分颜色">
          </el-table-column>
          <el-table-column
              prop="fm"
              width="80"
              label="分娩状态">
          </el-table-column>
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="6"
            layout="total, prev, pager, next"
            :total="count">
        </el-pagination>
        <div class="export">
          <div class="export-all ex" @click="exportAll">导出全部</div>
          <div class="export-current ex" @click="exportCurrent(tableData)">导出当前</div>
          <div class="export-custom1 ex" @click="exportCustom()">导出已选</div>
          <div class="export-custom ex" @click="remove">删除已分娩产妇</div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import {
  getUserInfo,
  deleteUser,
  exportExcel,
  deleteFm,
} from "../../api/users";
import {EventBus} from "../../utils/event";

export default {
  name: "index",
  data() {
    return {
      searchParams: 0,
      options: [{
        value: 0,
        label: '全部'
      }, {
        value: 1,
        label: '姓名'
      }, {
        value: 2,
        label: '身份证'
      }, {
        value: 3,
        label: '联系方式'
      },],
      searchText: "",
      datePicker: "",
      datePicker1: "",
      PickerStatus: false,
      Picker1Status: false,
      currentPage1: 1,
      tableData: [],
      page: 1,
      count: 0,
      loading: true,
      emitData: {},
      exportData:[]
    }
  },
  watch: {
    datePicker(newVal) {
      if (!newVal) {
        this.Picker1Status = false;
      }
    },
    datePicker1(newVal) {
      if (!newVal) {
        this.PickerStatus = false;
      }
    },
  },
  mounted() {
    this._getUserInfo();
  },
  beforeDestroy() {
    if (Object.keys(this.emitData).length) {
      EventBus.$emit("user", this.emitData)
    }

  },
  methods: {
    /**
     * @param val
     */
    handleSelectionChange(val){
      this.exportData = val;

    },
    exportCustom(){
      this.exportCurrent(this.exportData)
      this.$refs.multipleTable.clearSelection();
    },
    async remove(){
      let res = await deleteFm({status:1})
      if (res.code === 200) {
        this.$message.success(res.msg)
        this.page = 1;
        await this._getUserInfo();
      }
    },
    async exportCurrent(tableData){
      let data = tableData.map(item => {
        delete item.fm;
        delete item.xccj;
        delete item.fmStatus;
        delete item.id;
        return item
      });
      let xlsx = await exportExcel(data)
      this.exportOut(xlsx)
    },
    exportOut(results){
      const a = document.createElement('a')
      const blob = new Blob([results])
      const blobUrl = window.URL.createObjectURL(blob)
      a.href = blobUrl;
      a.download = "高危孕妇评分表.xls"
      a.click()
    },
    //导出全部
    async exportAll() {
      let res = await getUserInfo({pageNo:this.count})
      if (res.code === 200) {
        let results = res.results.map(item => {
          delete item.xccj;
          delete item.fmStatus;
          delete item.id;
          return item
            });
        let xlsx = await exportExcel(results)
        this.exportOut(xlsx)
      }
    },
    //搜索功能
    async search() {
      let res, params = {};
      if (this.searchParams === 1) {
        params = {name: this.searchText}
      } else if (this.searchParams === 2) {
        params = {identity: this.searchText}
      } else {
        params = {phone: this.searchText}
      }
      params = Object.assign(params, {page: this.page});
      res = await getUserInfo(params)
      this.tableData = res.results.map(item => {
        item.fm = item.fmStatus === 1 ? '已分娩' : item.fmStatus === "" ? '' : "未分娩"
        return item
      });
      this.count = res.count;
    },
    edit(data) {
      this.emitData = data;
      this.$router.push({path: "/edit"})

    },
    deleteUser(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteUser(data.id);
        await this._getUserInfo();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    async _getUserInfo() {
      let res = await getUserInfo({page: this.page})
      if (res.code === 200) {
        this.loading = false;
        this.tableData = res.results.map(item => {
            item.fm = item.fmStatus === 1 ? '已分娩' : item.fmStatus === "" ? '' : "未分娩"
          return item
        });
        this.count = res.count;
      }
    },
    async filterDate(args) {
      let tag = args === 'Picker'
      if (tag) {
        let [min_date, max_date] = this.datePicker;

        let res = await getUserInfo({min_date, max_date, page: this.page})
        if (res.code === 200) {
          this.tableData = res.results.map(item => {
              item.fm = item.fmStatus === 1 ? '已分娩' : item.fmStatus === "" ? '' : "未分娩"
            return item
          });
          this.count = res.count;
        }
        this.Picker1Status = !this.Picker1Status
      } else {
        let [min_xccj, max_xccj] = this.datePicker1;
        let res = await getUserInfo({min_xccj, max_xccj, page: this.page})
        if (res.code === 200) {
          this.tableData = res.results.map(item => {
              item.fm = item.fmStatus === 1 ? '已分娩' : item.fmStatus === "" ? '' : "未分娩"
            return item
          });
          this.count = res.count;
        }
        this.PickerStatus = !this.PickerStatus
      }
    },
    handleCurrentChange(num) {
      this.page = num;
      this.currentPage1 = num;
      this._getUserInfo();
    },


  }
}
</script>
<style scoped>
/deep/ .el-select {
  margin-left: 20px;
}

.search {
  width: 100%;
  height: inherit;
  padding: 30px 30px 5px;
  box-sizing: border-box;

}

.search-content {
  width: inherit;
  margin: 0 auto;
  position: relative;
  height: 572px;
}

.startpage-search-frame {
  margin: 80px auto 0;
  display: flex;
  width: 780px;
  background: rgba(255, 255, 255, .1);
  border-radius: 2px;
  padding: 0.5em;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 60%);
}

.filter {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
}

.filter1:nth-child(1) {
  margin-right: 10px;
}

input {
  height: 35px;
  width: inherit;
  box-shadow: none;
  background: 0 0 !important;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 50%);
}

button {
  background: 0 0;
  outline: none;
  border: none;
  cursor: pointer;
}

i {
  color: #fff;
  font-size: 18px !important;
}

.search-table {
  margin-top: 20px;
}

.pagination {
  margin-top: 18px;
  position: relative;

}

.export {
  position: absolute;
  display: flex;
  right: 20px;
  top: 2px;
  /*justify-content: space-between;*/
  width: 500px;
}

.ex {
  width: 110px;
  margin-right: 50px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  background: #3a8ee6;
  border-radius: 4px;
  cursor: pointer;
}
.export-custom{
  width: 170px;
}

</style>
